<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="任务编码" prop="taskNo">
        <el-input v-model="queryParams.taskNo" placeholder="请输入任务编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="平台名称" prop="platformCompanyName" v-if="organizationType === 0">
        <el-input v-model="queryParams.platformCompanyName" placeholder="请输入平台名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="代理名称" prop="agentCompanyName"  v-if="organizationType === 0 || organizationType === 1 || organizationType === 3">
        <el-input v-model="queryParams.agentCompanyName" placeholder="请输入代理名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="税源名称" prop="taxCompanyName">
        <el-input v-model="queryParams.taxCompanyName" placeholder="请输入税源名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="用工企业名称" label-width="100px" prop="merchantCompanyName" v-if="organizationType !== 4">
        <el-input v-model="queryParams.merchantCompanyName" placeholder="请输入用工企业名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="任务名称" prop="taskName">
        <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="任务类型 " prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择任务类型" clearable style="width: 240px">
          <el-option label="分包" :value="1" />
          <el-option label="众包" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable style="width: 240px">
          <el-option label="开启" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="auditStatus">
        <el-select v-model="queryParams.auditStatus" placeholder="请选择审核状态" clearable style="width: 240px">
          <el-option label="待提交" :value="0" />
          <el-option label="审核中" :value="1" />
          <el-option label="审核成功" :value="2" />
          <el-option label="审核驳回" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startDate">
        <el-date-picker clearable v-model="queryParams.startDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker clearable v-model="queryParams.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发票类型" prop="invoiceType">
        <el-select v-model="queryParams.invoiceType" placeholder="请选择发票类型" clearable style="width:240px">
          <el-option label="专票" :value="1" />
          <el-option label="普票" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否结算 " prop="isSettlement">
        <el-select v-model="queryParams.isSettlement" placeholder="请选择是否结算" clearable style="width: 240px">
          <el-option label="未结算" :value="0" />
          <el-option label="结算中" :value="2" />
          <el-option label="已结算" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:task:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:task:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="taskList">
      <el-table-column fixed="left" label="任务编码" align="center" prop="taskNo" width="180"/>
      <el-table-column label="任务名称" show-overflow-tooltip width="180" align="center" prop="taskName">
        <template slot-scope="{ row }">
          <el-button type="text" size="mini" @click="handleDetail(row)">{{ row.taskName }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="平台名称" v-if="organizationType === 0" show-overflow-tooltip width="200" align="center" prop="platformCompanyName" />
      <el-table-column label="代理名称" v-if="organizationType === 0 || organizationType === 1 || organizationType === 3" show-overflow-tooltip width="200" align="center" prop="agentCompanyName" />
      <el-table-column label="税源地" show-overflow-tooltip width="200" align="center" prop="taxCompanyName" />
      <el-table-column label="用工企业名称" v-if="organizationType !== 4" show-overflow-tooltip width="200" align="center" prop="merchantCompanyName" />
      <el-table-column label="发票类型" align="center" prop="invoiceType">
        <template slot-scope="{ row }">{{ row.invoiceType | invoiceTypeName }}</template>
      </el-table-column>
      <el-table-column label="开票类目" align="center" prop="invoiceCatagory" min-width="180" show-overflow-tooltip/>
      <el-table-column label="金额/万元" align="center" prop="money" width="120">
        <template slot-scope="{ row }">
          <span>{{ row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="type" width="90">
        <template slot-scope="{ row }">
          <el-tag type="success" v-if="row.type === 1">分包</el-tag>
          <el-tag v-else-if="row.type === 2">众包</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center" prop="auditStatus" width="200">
        <template slot-scope="{ row }">
          <el-tag type="warning" v-if="row.auditStatus === 0">待提交</el-tag>
          <el-tag type="info" v-else-if="row.auditStatus === 1">审核中</el-tag>
          <el-tag v-else-if="row.auditStatus === 2">审核通过</el-tag>
          <el-popover placement="bottom" title="" width="200" trigger="click" :content="row.auditReason">
            <el-tag slot="reference" v-if="row.auditStatus === 3" style="cursor: pointer"
                    type="danger">点击查看驳回原因</el-tag>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="是否结算 " align="center" prop="isSettlement" width="100">
        <template slot-scope="{ row }">
          <el-tag type="warning" v-if="row.isSettlement === 0">待结算</el-tag>
          <el-tag v-else-if="row.isSettlement === 1">已结算</el-tag>
          <el-tag type="success" v-else-if="row.isSettlement === 2">结算中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="创建时间" align="center" prop="createTime" width="180" />
      <el-table-column label="开始截止日期" align="center" prop="endDate" width="180">
        <template slot-scope="{ row }">
          {{row.startDate}}-
          {{row.endDate}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" :disabled="scope.row.auditStatus !== 2 || scope.row.isSettlement !==0"
                     icon="el-icon-more-outline" @click="handleSettlement(scope.row)"
                     v-hasPermi="['system:task:settlement']">结算</el-button>

          <el-button size="mini" type="text" :disabled="scope.row.auditStatus !== 0" icon="el-icon-check"
                     @click="handleAuditSave(scope.row)" v-hasPermi="['system:task:saveToExamine']">提交</el-button>


          <el-dropdown @command="(command)=>handleCommand(command,scope.row)">
            <el-button size="mini" type="text">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="edit" v-hasPermi="['system:task:edit']">修改</el-dropdown-item>
              <el-dropdown-item command="delete" v-has-permi="['system:task:remove']">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" @close="form.taskNo = null" destroy-on-close :title="title" :visible.sync="open" size="55%" class="app-drawer" append-to-body>
      <task-operate @cancel="handleCancel" :taskNo="form.taskNo"></task-operate>
    </el-drawer>

    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" @close="form.taskNo = null" destroy-on-close title="任务详情" :visible.sync="detailOpen" size="55%" class="app-drawer" append-to-body>
      <task-detail @cancel="handleCancel" :taskNo="form.taskNo"></task-detail>
    </el-drawer>

    <el-dialog :close-on-press-escape="false" :close-on-click-modal="false" class="app-drawer" @close="form = {}" destroy-on-close title="结算" :visible.sync="settlementOpen" width="500px" append-to-body>
      <task-settlement @cancel="handleCancel" :formData="form" ></task-settlement>
    </el-dialog>

  </div>
</template>

<script>
import store from "@/store";
import TaskOperate from "@/views/system/task/profile/operate.vue";
import TaskDetail from "@/views/system/task/profile/detail.vue";
import TaskSettlement from "@/views/system/task/profile/settlement.vue";
import { listTask, delTask, updateTask, saveToExamine } from "@/api/system/task"

export default {
  name: "Task",
  components: {TaskSettlement, TaskDetail, TaskOperate},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 任务表格数据
      taskList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen:false,
      settlementOpen:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type:null,
        status:null,
        taskNo:null,
        taskName:null,
        startDate:null,
        endDate:null,
        invoiceType:null,
        auditStatus:null,
        isSettlement:null,
        taxCompanyName:null,
        agentCompanyName:null,
        merchantCompanyName:null,
        platformCompanyName:null,
      },
      taskNo:null,
      form:{
        taskNo:null,
      },
      organizationType: store.getters.organizationType,
    }
  },
  created() {
    this.getList()
  },
  filters: {
    invoiceTypeName(value) {
      switch (value) {
        case 1: return '专票';
        case 2: return '普票';
        default: return '';
      }
    }
  },
  methods: {
    /** 查询任务列表 */
    getList() {
      this.loading = true
      listTask(this.queryParams).then(response => {
        this.taskList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.open = true
      this.title = "添加任务"
    },

    handleCommand(common,row){
      if(common === "edit"){
        this.handleUpdate(row)
      }else if(common === "delete"){
        this.handleDelete(row)
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form.taskNo = row.taskNo
      this.open = true
      this.title = "编辑任务"
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const taskNos = row.taskNo
      this.$modal.confirm('是否确认删除任务编号为"' + taskNos + '"的数据项？').then(function() {
        return delTask(taskNos)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/task/export', {
        ...this.queryParams
      }, `task_${new Date().getTime()}.xlsx`)
    },
    handleDetail(row){
      this.taskNo = row.taskNo
      this.detailOpen = true
    },
    handleCancel(row){
      if (row){
        this.getList()
      }
      this.open = false
      this.detailOpen = false
      this.settlementOpen = false
    },
    handleStatusChange(row) {
      let text = row.status === 0 ? "启用" : "禁用";
      this.$modal.confirm('确认要"' + text + '""' + row.taskName + '"任务吗？').then(function () {
        return updateTask({taskNo:row.taskNo, status:row.status});
      }).then(() => {
        this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === 0 ? 1 : 0;
      });
    },
    handleAuditSave(row) {
      this.$modal.confirm('是否确认提交 ' + row.taskName + ' 任务？').then(function () {
        let data = { ...row }
        data.auditStatus = 1
        return saveToExamine(data);
      }).then(() => {
        this.$modal.msgSuccess("提交成功");
        this.getList();
      }).catch(() => {
      });
    },
    handleSettlement(row) {
      this.form = row
      this.settlementOpen = true;
    }
  }
}
</script>

